<template>
  <div class="cxy-page">
    <logindiv v-if='!islogin'
      @login='loginAction'
      @regist='registAction'></logindiv>
    <div v-else>
      <div class="page-title">我的</div>
    <button class="msg" @click='loadmsglist'>消息中心</button>
    <div class="newtip"></div>
    <div class="mainpael">
        <img class="cxy-profileimg" :src="info.profileImgUrl" mode='aspectFill'>
        <!-- -------------------------------------------------------------- -->
        <div class="cell one">
          <input type="text" v-model='info.realname' class="cell-left" placeholder="名字" confirm-type='done'>
          <input type="number" v-model='info.age' class="cell-right " placeholder="年龄" confirm-type='done'>
        </div>     

        <div class="cell two">
          <picker class="cell-left"
            placeholder="所在城市"
            :value='info.city'
            :range="citys"
            @change='bindRegionChange'
            mode="region">
          <div class="city-selectedview">
            {{info.city}}
          </div>
          </picker>   
          <input text v-model="info.status"
            data-value='ac' 
            @click='showStatusSheet' 
            disabled='disabled' 
            class="cell-right" 
            placeholder="状态">
        </div>   
        
        <div class="cell three">
          <input type="text" v-model='info.jobName' class="cell-right" placeholder="工作" confirm-type='done'>
        </div>

        <!-- -------------------------------------------------------------- -->
        <div class="input-title">
          个人描述
        </div>
        <div class='input-bg'>
          <textarea confirm-type='done' :value='info.shotMsg'></textarea>
        </div>
    </div>  
    </div>
  </div>
</template>

<script>
  import logindiv from '../../components/logindiv.vue'
  export default {
    components:{
      logindiv,
    },
    onShow(){
      let userModel = this.globalData.userModel
      if (userModel == undefined) {
        this.islogin = false;
        wx.hideTabBar({});
      } else {
        this.islogin = true;
      }
    },
    mounted(){
     
    },
    data(){
      return {
        info:{
          realName:undefined,
          age:undefined,
          city:[],
          job:undefined,
          status:undefined,
          shotMsg:undefined,
        },
        islogin:false,
        date:'',
        statuss:['未婚','离异'],

      }
    },
    methods:{
      itemClick(){
        let url = '../persondetail/main';
        wx.navigateTo({url});
      },
      bindRegionChange(e){
        let arr = e.mp.detail.value;
        this.info.city = `${arr[0]}${arr[1]}`;
      },
      dateChange(){

      },
      loadmsglist(){
        let url = '../msg/main';
        wx.navigateTo({url});
      },
      loginAction(info){
        wx.showLoading({});
        let self = this;
        wx.request({
          url:this.baseURI+'user/login',
          method:'POST',
          data:{username:info['uname'],
                password:info['upass']},
          success:function(res) {
            let data = res.data;
            if (data['status'] !== 200) {
              wx.showToast({
                title:data['msg'],
                icon:'none',
                duration:2000,
              });
              return;
            }
            self.netFetchMyInfo(data['data']['pid']);
          },
          fail:function(res) {
            wx.hideLoading();
          },
        });
      },

      netFetchMyInfo(pid) {
        let self = this;
        wx.request({
          url:this.baseURI + 'user/queryprofile',
          method:'GET',
          data:{pid},
          success:function(res) {
            let data = res.data['data'];
            self.globalData.userModel = data;
            self.info = data;
            self.info.status = data['status'] == 1 ? '未婚':'已婚';

            wx.hideLoading();
            self.islogin = true;
            wx.showTabBar({});
            console.log(data);
          },
          fail:function(res) {
            wx.hideLoading();
            console.log(res.error);
          },
        });
      },
      registAction(){
        let url = '../regsit/main';
        wx.navigateTo({url});
      },
      showStatusSheet(e){
        let dv = e.currentTarget.dataset['value'];
        if (dv != 'ac') {
          return;
        }
        let self = this;
        wx.showActionSheet({  
            itemList: self.statuss,
            success: function(res) {  
                self.info.status = self.statuss[res.tapIndex];
            }
            // ,  fail: function(res) {  
            //     console.log(res.errMsg)  
            // }
        });
      },
    },
  }
</script>


<style scoped>
  .msg{
    width: 90px;
    height: 30px;
    background-color: rgba(216,216,216,0.1);
    border:1px solid rgba(0,0,0,0.2);
    font-size: 13px;
    line-height: 28px;
    color: rgba(0,0,0,0.3);
    border-radius: calc(30px / 2);
    position: absolute;
    left: 110px;
    top: 70px;
    padding-right: 20px;
  }
  .newtip {
    background-color:red;
    width:15rpx;
    height:15rpx;
    position:absolute;
    left:370rpx;
    top:160rpx;
    border-radius:10rpx;
    box-shadow: 0 0 5px red;
  }

  .page-title {
    font-size: 32px;
    color: black;
    margin-top: 60px;
    margin-left: 30px;
  }
  .mainpael {
    height: 80%;
    margin-top: 10px;
    position: relative;
  }

  .cxy-profileimg {
    width: 100%;
    height: 240px;
  }
  
  .cell {
    height: 45px;
    border-bottom: solid 1px #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cell-left {
    height: 100%;
    flex:1;
    padding-left: 15px;
  }
  
  .cell-right {
    height: 100%;
    flex:1;
    padding-left: 15px;
  }
  
  span{
    color: #878888;
    margin-right: 5px;
  }

  input {
    font-size: 14px;
  }

  button::after {
    border: none;
  }

  .city-selectedview {
    font-size: 14px;
    line-height: 45px;
  }
  
  .input-title {
    height: 35px;
    font-size: 16px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 35px;
    border-bottom: 1px solid #f1f1f1;
    background-color: #f8f8fc;
  }
  .input-bg {
    height: 300px;
    padding: 15px;
  }
  .input-bg textarea {
    font-size: 14px;
  }

</style>
